<template>
  <div class="info-wrapper">
    <div class="info-box">
      <h1>Edit your profile</h1>
      <el-form :model="form" label-width="120px">
        <el-form-item label="Username">
          <el-input v-model="username" disabled/>
        </el-form-item>
        <el-form-item label="Nickname">
          <el-input v-model="nickname" />
        </el-form-item>
        <el-form-item label="Gender">
          <el-select v-model="gender">
            <el-option label="Male" value=true />
            <el-option label="Female" value=false />
          </el-select>
        </el-form-item>
        <el-form-item label="Phone">
          <el-input v-model="phone" />
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="email" />
        </el-form-item>
        <el-form-item label="Birth">
          <el-date-picker
            v-model="birth"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Birthdate"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="Description">
          <el-input v-model="description" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'edit',
  props: {
    currentUserId: { type: Number }
  },
  data() {
    return {
      username: '',
      nickname: '',
      gender: true,
      phone: '',
      email: '',
      birth: '',
      description: '',

    }
  },
  methods: {
    handleSubmit() {
      let params = {
        'userid': this.currentUserId,
        'nickname': this.nickname,
        'gender': this.gender=="true" ? true : false,
        'phone': this.phone,
        'email': this.email,
        'birth': this.birth,
        'description': this.description
      }
      console.log(params)
      axios({
        method: 'post',
        url: '/api/updateInfoByUserId',
        params: params
      }).then((res) => {
        // console.log(res.data)
        if (!!res.data.success) {
          ElMessage({
            message: 'Successfully Updated!',
            type: 'success',
          })
        }
      })
    }
  },
  mounted() {
    axios({
      method: 'post',
      url: '/api/getInfoByUserId',
      params: {
        userid: this.currentUserId
      }
    }).then((res) => {
      this.$nextTick(() => {
        if (res.data.success) {
          // console.log(res.data.data[0])
          this.username = res.data.data[0].username
          this.nickname = res.data.data[0].nickname
          this.gender = res.data.data[0].gender
          this.phone = res.data.data[0].phone
          this.email = res.data.data[0].email
          this.birth = res.data.data[0].birth
          this.description = res.data.data[0].description
        }
      })
    })
  },
}
</script>

<style scoped>
.info-wrapper {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.info-box {
  margin: 0 auto;
  height: calc(100% - 40px);
  width: calc(800px);
  box-shadow: var(--el-box-shadow);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
</style>